/**
 * @author claude
 * @date 2020/02/24
 * @description 锚点事件
 */

const dragLog = [] // 记录鼠标坐标
const anchorNodeId = null // dragover 也会发生在拖拽的锚点上, 用于记录当前拖拽的节点id
const offset = { x: 0, y: 0 }
const nodeStyle = {
  width: 0,
  height: 0,
  scale: 1,
  x: 0,
  y: 0
}

const icon = {
  x: 0,
  y: 0
}

export default (editNode, group, p) => {
  // 鼠标移入事件
  editNode.on('mouseenter', () => {
    // 可以传入多个键值对
    /* editNode.attr({
      cursor: 'crosshair'
    })*/
  })

  // 拖拽事件
  editNode.on('dragstart', e => {
    offset.x = e.x
    offset.y = e.y
    const cfg = group.cfg
    const { width, height, x, y } = cfg.cacheCanvasBBox
    nodeStyle.width = width
    nodeStyle.height = height
    nodeStyle.scale = width / height
    nodeStyle.x = x
    nodeStyle.y = y

    const e_x = editNode.attrs.x
    const e_y = editNode.attrs.y
    icon.x = e_x
    icon.y = e_y
  })

  // 拖拽中
  editNode.on('drag', e => {
    //  console.log('拖拽中：' + e.x, e.y, editNode)
    const item = group.getFirst()
    const img = group.get('children').find(child => child.cfg.name === 'node-img')

    // 移动的距离
    const distance = {
      x: e.x - offset.x,
      y: e.y - offset.y
    }

    offset.x = e.x
    offset.y = e.y
    nodeStyle.width += distance.x * 2

    if (distance.y === 0) { // y轴方向上没有移动
      nodeStyle.height += distance.y * 2 / nodeStyle.scale
      nodeStyle.y -= distance.x / nodeStyle.scale
    } else {
      nodeStyle.height += distance.y * 2
      nodeStyle.y -= distance.y
    }
    nodeStyle.x -= distance.x
    icon.x += distance.x * 2

    console.log('移动icon：' + icon.x)

    editNode.attr({
      x: icon.x
    })
    const model = {
      // x: nodeStyle.x,
      // y: nodeStyle.y,
      width: nodeStyle.width,
      height: nodeStyle.height
    }

    item.attr(model)
    img.attr(model)
  })

  // 拖拽结束删除虚线
  editNode.on('dragend', e => {

  })

  // 拖拽到其他锚点上
  editNode.on('dragenter', e => {

  })

  // 拖拽离开事件
  editNode.on('dragleave', e => {

  })

  // ! 在锚点上释放见node监听事件
}
